<template>
	<view style="display: flex;flex-direction: column;height: 100%;">
		<view class="Data_tab">
			<!-- <view class="item" :class="{ item1: Console_tab_index == 0 }" @tap="Console_tab(0)">趋势</view> -->
			<view class="item" :class="{ item1: Console_tab_index == 1 }" @tap="Console_tab(1)">{{$t("zhendang")}}</view>
		</view>
		<view class="tom-container">
			<Contract ref="Contract" v-if="Console_tab_index == 0"></Contract>
			<Contract2 ref="Contract2" v-if="Console_tab_index == 1"></Contract2>
		</view>
	</view>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import Contract from './Contract.vue';
import Contract2 from './Contract2.vue';
export default {
	data() {
		return {
			Console_tab_index: 1
		};
	},
	computed: {
		...mapState(['Console'])
	},
	mounted() {
		// this.liao_er();
	},
	methods: {
		Console_tab(index) {
			this.Console_tab_index = index;
		},
		liao_er() {
			console.log(this.Console,'qwewe')
			if (this.Console != null) {
				if (this.Console.strategyType != null) {
					this.Console.strategyType == 'TREND' ? (this.Console_tab_index = 0) : (this.Console_tab_index = 1);
					console.log(this.Console_tab_index)
				}
			}
		}
	},
	components: {
		Contract,
		Contract2
	}
};
</script>

<style lang="scss" scoped>
.Data_tab {
	display: flex;
	padding: 18rpx $nr-padd;
	.item {
		font-size: 32rpx;
		margin-right: 40rpx;
		color: $tom-text-sub-color2;
		position: relative;
	}
	.item1 {
		color: $text-color;
		font-weight: bold;
	}
	.item1::before {
		content: '';
		position: absolute;
		bottom: -12rpx;
		left: 0rpx;
		width: 100%;
		height: 4rpx;
		background-color: $text-color;
	}
}
.tom-container {
	display: inline;
}
</style>
